import React, { PureComponent } from 'react';
import { Tab } from '@alifd/next';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import './published.scss';

function random(min, max) {
  return parseInt(Math.random() * (max - min + 1) + min, 10);
}

function mockCentent() {
  return Array.from({ length: 2 + Math.round(Math.random() * 5) }).map(() => {
    return {
      title: ['计算机', 'xxxx流行学', '美发心得', '场景搭配'][random(0, 3)],
      detail: [
        {
          label: '文章描述',
          desc:
            '分享日常的真人穿搭或专业的教程，对时尚有自己的理解，能够给消费者提供时尚搭配心得',
        },
      ],
    };
  });
}

class PostCategory extends PureComponent {
  // handleNewPost = () => {
  //   this.props.history.push('/post/new');
  // };

  constructor(props) {
    super(props);
    this.state = ({
      allCopyrightData: [],
      copyrightedData: []
    });
    this.init();
  }

  init = () => {
    let userId = localStorage.getItem("id");
    axios.get('http://localhost:9080/copyright/auth/user-works?start=0&length=20&userId='+userId, {
      headers: {
        'Authorization': "Bearer " + localStorage.getItem("access_token")
      }
    }).then((res) => {
      console.log(res.data.data);
      if(res.data.data.length === 0) {
        this.setState({
          copyrightedData: []
        });
      }else {
        this.setState({
          copyrightedData: res.data.data
        });
      }
    }).catch((err) => {
      console.log(err);
    });
  }

  render() {
    const { allCopyrightData, copyrightedData } = this.state;
    const tabs = [
      {
        title: '我的版权',
        icon: require('./images/orders.png'),
        key: 'home',
        content: allCopyrightData,
      },
      {
        title: '已获授权',
        icon: require('./images/ordering.png'),
        key: 'doc',
        content: copyrightedData,
      },
    ];

    return (
      <div>
        <div className="titleWrapper">
          <span
            style={{
              fontSize: 16,
              fontWeight: 'bold',
              color: '#333',
              paddingRight: 20,
            }}
          >
            版权列表
          </span>
          <span style={{ fontSize: 12, color: '#999' }}>
            我的版权，以及通过交易获取的版权
          </span>
        </div>
        <Tab
          navStyle={{ backgroundColor: '#fff' }}
          contentStyle={{
            backgroundColor: '#fff',
            marginTop: '20px',
            borderRadius: '6px',
          }}
        >
          {tabs.map((tab) => {
            return (
              <Tab.Item
                tabStyle={{ height: 60, padding: '0 15px' }}
                key={tab.key}
                title={
                  <div className="navItemWraper">
                    <img
                      alt={tab.title}
                      src={tab.icon}
                      style={{ width: 30, marginRight: 8 }}
                    />
                    {tab.title}
                  </div>
                }
              >
                <div className="postCategoryList">
                  {
                    tab.content.length === 0 ? 
                      <IceContainer style={{textAlign: "center"}}>抱歉，您的版权列表为空，可以上传新的作品哦！</IceContainer>
                    :
                    tab.content.map((item, index) => {
                    return (
                      <div key={index} className="buyerOrder">
                        <div className="blockDetail">
                          <div className="blockTitle"> 作品编号 {item.workId} </div>
                          <div className="blockItem">
                            <label className="blockLable"> 作品名称 </label>
                            <div className="blockDesc"> {item.workName} </div>
                          </div>
                          <div className="blockItem">
                            <label className="blockLable"> 作品描述 </label>
                            <div className="blockDesc"> {item.workDesc} </div>
                          </div>
                          <div className="blockItem">
                            <label className="blockLable"> 作者编号 </label>
                            <div className="blockDesc"> {item.authorId} </div>
                          </div>
                          <div className="blockItem">
                            <label className="blockLable"> 作者姓名 </label>
                            <div className="blockDesc"> {item.authorName}（我）</div>
                          </div>
                          <div className="blockItem">
                            <label className="blockLable"> 作品分类 </label>
                            <div className="blockDesc"> {item.workType} </div>
                          </div>
                          <div className="blockTime">
                            <div className="blockCreateTime">生成时间：{item.createTime} </div>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </Tab.Item>
            );
          })}
        </Tab>
      </div>
    );
  }
}


export default withRouter(PostCategory);